<template>
  <!-- <div class="login-container" ref="login" @keyup.enter="handleLogin">
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <div class="login-time">
          {{ time }}
        </div>
        <p class="title">{{ $t('login.info') }}</p>
        <div style="font-size: 15px">
          <span>----------------------------------------------</span>
          <br />
          <span>管理租户编号：000000</span>
          <br />
          <span>超级管理员账号: admin / 123456</span>
          <br />
          <span>人事账号: hr / hr</span>
          <br />
          <span>经理账号: manager / manager</span>
          <br />
          <span>老板账号: boss / boss</span>
          <br />
          <span>----------------------------------------------</span>
          <br />
          <span>普通租户编号：详见租户管理模块</span>
          <br />
          <span>租户管理员账号: admin / admin</span>
          <br />
          <span>----------------------------------------------</span>
        </div>
        <img class="img" src="/img/logo.png" alt="">
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">
            {{ $t('login.title') }}{{ website.title }}
            <top-lang></top-lang>
          </h4>
          <userLogin v-if="activeName === 'user'"></userLogin>
          <codeLogin v-else-if="activeName === 'code'"></codeLogin>
          <thirdLogin v-else-if="activeName === 'third'"></thirdLogin>
          <div class="login-menu">
            <a href="#" @click.stop="activeName = 'user'">{{ $t('login.userLogin') }}</a>
            <a href="#" @click.stop="activeName = 'code'">{{ $t('login.phoneLogin') }}</a>
            <a href="#" @click.stop="activeName = 'third'">{{ $t('login.thirdLogin') }}</a>
            <a :href="website.oauth2.ssoUrl + website.oauth2.redirectUri">{{
              $t('login.ssoLogin')
            }}</a>
          </div>
        </div>
      </div>
    </div>
  </div> -->

  <div class="Certification">
    <div class="Certification_title">
      <div class="Certification_title_icon"></div>
      <div class="Certification_title_text">深圳联合东创科技有限公司</div>
    </div>

    <div class="Certification_login">
      <div class="Certification_login_info">
        <div class="Certification_login_info_title">深圳联合东创科技有限公司</div>

        <div class="login-border">
          <el-tabs v-model="activeName" style="width: 100%" @tab-change="handleClick">
            <el-tab-pane label="账户密码" name="first">
              <div class="login-main">
                <userLogin v-if="activeNameOne === 'user'"></userLogin>
                <codeLogin v-else-if="activeNameOne === 'code'"></codeLogin>
                <thirdLogin v-else-if="activeNameOne === 'third'"></thirdLogin>
              </div>
            </el-tab-pane>
            <el-tab-pane label="企业微信" name="second">
              <div class="WeChat">
                <div v-if="isFailed" id="wx_reg"></div>
                <div v-else><img src="/img/loginImages/kong.png" alt="" /></div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import userLogin from './userlogin.vue';
import codeLogin from './codelogin.vue';
import thirdLogin from './thirdlogin.vue';
import { mapGetters } from 'vuex';
import { validatenull } from '@/utils/validate';
import topLang from '@/page/index/top/top-lang.vue';
import { getQueryString, getTopUrl, isExternalUrl } from '@/utils/util';
import website from '@/config/website';
import Api from '@/api/index';

export default {
  name: 'login',
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    topLang,
  },
  data() {
    return {
      activeName: 'first',
      website: website,
      time: '',
      activeNameOne: 'user',
      socialForm: {
        tenantId: '000000',
        source: '',
        code: '',
        state: '',
      },
      isFailed: false,
    };
  },

  watch: {
    $route() {
      this.handleLogin();
    },
  },
  created() {
    this.handleLogin();
    this.getTime();
  },
  computed: {
    ...mapGetters(['tagWel']),
  },
  props: [],
  methods: {
    async getWxReg() {
      try {
        this.isFailed = true;
        const res = await Api.wxReg.wxRegState();
        const { code, data } = res.data;
        if (code == 200) {
          new WwLogin({
            id: 'wx_reg',
            appid: 'ww79633eb64931f2e2',
            agentid: '1000043',
            redirect_uri: 'http%3a%2f%2fwww.eastwinbip.com%2foauth%2fredirect%2fwechat_enterprise',
            state: data,
            href: '',
            lang: 'zh',
          });
        } else {
          this.isFailed = false;
        }
      } catch (error) {
        this.isFailed = false;
      }
    },

    handleClick() {
      if (this.activeName == 'second') this.getWxReg();
    },

    getTime() {
      setInterval(() => {
        this.time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
      }, 1000);
    },
    handleLogin() {
      const topUrl = getTopUrl();
      const redirectUrl = '/oauth/redirect/';
      const ssoCode = '?code=';
      this.socialForm.source = getQueryString('source');
      this.socialForm.code = getQueryString('code');
      this.socialForm.state = getQueryString('state');
      let callbackUrl = getQueryString('callbackUrl');
      if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
        let source = topUrl.split('?')[0];
        source = source.split(redirectUrl)[1];
        this.socialForm.source = source;
      }

      if (
        !validatenull(this.socialForm.source) &&
        !validatenull(this.socialForm.code) &&
        !validatenull(this.socialForm.state)
      ) {
        const loading = this.$loading({
          lock: true,
          text: '第三方系统登录中,请稍后',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        this.$store
          .dispatch('LoginBySocial', this.socialForm)
          .then(async () => {
            //加载工作流路由集
            this.loadFlowRoutes();
            const menus = await this.$store.dispatch('GetMenu');
            this.$router.$avueRouter.formatRoutes(menus, true);
            if (callbackUrl) {
              // 判断是否为外部连接
              if (isExternalUrl(callbackUrl)) {
                window.location.href = callbackUrl;
              } else {
                this.$router.push(callbackUrl);
              }
            } else {
              this.$router.push(this.tagWel);
            }
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      } else if (!validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: '单点系统登录中,请稍后',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        this.$store
          .dispatch('LoginBySso', this.socialForm)
          .then(async () => {
            //加载工作流路由集
            this.loadFlowRoutes();
            const menus = await this.$store.dispatch('GetMenu');
            this.$router.$avueRouter.formatRoutes(menus, true);
            if (callbackUrl) {
              // 判断是否为外部连接
              if (isExternalUrl(callbackUrl)) {
                window.location.href = callbackUrl;
              } else {
                this.$router.push(callbackUrl);
              }
            } else {
              this.$router.push(this.tagWel);
            }
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    loadFlowRoutes() {
      this.$store.dispatch('FlowRoutes').then(() => {});
    },
  },
};
</script>
<style lang="scss">
#wx_reg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Certification .el-input {
  border: 1px solid #e5e5e5;
}

.Certification .login-form .el-input .el-input__wrapper {
  border: 0px;
}

.Certification .login-form .el-form-item {
  margin-bottom: 18px;
}

.Certification .el-input .el-input__wrapper {
  padding: 5px 3px;
}

.Certification .login-submit {
  width: 100%;
}
</style>
<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.Certification {
  width: 100%;
  height: 100%;
  background-image: url('https://static.eastwinbip.com/static/image/login-bg.webp');
  background-size: cover;
}

.Certification .Certification_title {
  height: 60px;
  position: relative;
  left: 36px;
  top: 20px;
  float: left;
}

.Certification .Certification_title .Certification_title_icon {
  width: 60px;
  height: 60px;
  background-image: url('https://static.eastwinbip.com/static/image/LOGO.png');
  background-repeat: no-repeat;
  float: left;
}

.Certification .Certification_title .Certification_title_text {
  font-weight: bold;
  font-size: 27px;
  color: #333333;
  line-height: 27px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  float: left;
  margin-top: 18px;
}

.Certification .Certification_login {
  display: flex;
  flex-direction: row-reverse;
}

.Certification .Certification_login .Certification_login_info {
  width: 538px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  padding: 56px 0 30px 0;
  margin-right: 160px;
  margin-top: 200px;
}

.Certification .Certification_login .Certification_login_info .Certification_login_info_title {
  font-weight: bold;
  font-size: 28px;
  color: #333333;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 0px 0px 16px 0px;
}

.tabs {
  display: flex;
  cursor: pointer;
  margin-left: 28px;
}

.tab {
  font-weight: 400;
  font-size: 20px;
  color: #666666;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 36px;
  margin-top: 54px;
}

.tab.active {
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-bottom: 2px solid #f29346;
  border-radius: 0px 0px 0px 0px;
  padding-bottom: 3px;
}

.content {
  display: none;
  margin-top: 20px;
  margin-left: 64px;
  margin-right: 64px;
}

.content.active {
  display: block;
}

.content_tabtwo {
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.content .forget {
  float: right;
  font-weight: 400;
  font-size: 12px;
  color: #f29346;
  line-height: 12px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 23px;
}

.content .content_input {
  display: flex;
  align-items: center;
  border: 1px solid #e5e5e5;
  margin-top: 20px;
}

.content .content_input img {
  width: 24px;
  height: 24px;
  margin: 12px 15px 12px 16px;
}

.content .content_input input {
  width: 410px;
  height: 48px;
  border-radius: 0px 0px 0px 0px;
  border: none;
}

.content .content_input input:focus {
  border: none;
}

.content .content_button button {
  width: 411px;
  height: 40px;
  background: #f29346;
  border-radius: 0px 0px 0px 0px;
  margin-top: 20px;
  border: none;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.WeChat_title {
  display: flex;
  justify-content: center;

  img {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    margin-right: 8px;
  }

  span {
    //font-family: Arial, Arial;
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    line-height: 32px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.WeChat_content {
  .WeChat_content_img {
    display: flex;
    justify-content: center;

    img {
      //width: 200px;
      height: 200px;
    }
  }
}

.WeChat_content_text_title {
  font-weight: 400;
  font-size: 16px;
  color: #848488;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 10px;
}
</style>
<style lang="scss">
@use '@/styles/login.scss';
</style>
